<template>
  <view class="">
		<view class="div" :style={width:windowWidth} :class="isShow==true?show:unShow">
			<view class="title">
				{{title}}
			</view>
			<view class="inp" v-show="inp">
				<input :type="type" value="" :placeholder="placeholder" v-model="value"/>
			</view>
			
			<view class="content" v-show='!inp'>
				<view v-if="content != 'false'">
					{{content}}
				</view>
				<view>
					<slot />
				</view>
			</view>
			<view class="btn">
				<view v-if="showCancel" class="left" :style={color:cancelCor} hover-class="hover" @click="cancel()">
					{{cancelBtn}}
				</view>
				<view class="right" :style={color:okCor}  hover-class="hover" @click="ok()">
					{{okBtn}}
				</view>
			</view>
		</view>
	<view class="mask" v-show="isShow"></view>
  </view>
</template>

<script>
	export default{
		name:"modal",
		props:{
			isShow:{
				type:Boolean,
				default:false
			},
			type: {
				type: String,
				default: 'text'
			},
			title:{
				type:String,
				default:'默认标题'
			},
			placeholder:{
				type:String,
				default:'请输入'
			},
			inpValue:String,
			cancelBtn:{
				type:String,
				default:'取消'
			},
			showCancel:{
				type:Boolean,
				default:true
			},
			okBtn:{
				type:String,
				default: '确定'
			},
			cancelCor:{
				type:String,
				default: '#C2C2C1'
			},
			okCor:{
				type:String,
				default: '#007AFF'
			},
			inp:{
				type:Boolean,
				default:true
			},
			content:{
				type:String,
				default:'请输入内容...'
			}
		},
		data() {
			return {
				windowHeight:'',
				windowWidth:'',
				value:'',
				animation:{},
				show:'show',
				unShow:'unShow2'
			}
		},
		created() {
			let that = this
			uni.getSystemInfo({
				success:function(res){
					that.windowHeight = res.windowHeight*0.28+'px'
					that.windowWidth = res.windowWidth*0.85+'px'
				}
			})
		},
		methods:{
			cancel(){
				let that = this
				this.$emit('cancel',this.value)
				that.unShow = 'unShow1'
				// setTimeout(function(){
					that.unShow = 'unShow2'
				// },300)
				console.log('您点击了取消..')
				this.value = ''
			},
			ok(){
				let that = this
				this.$emit('ok',this.value)
				that.unShow = 'unShow1'
				// setTimeout(function(){
					that.unShow = 'unShow2'
				// },300)
				console.log('您点击了确定..')
				this.value = ''
			}
		}
	}
</script>

<style lang="scss">
	.mask{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.3);
		z-index: 999;
	}
	.div{
		text-align: center;
		color: white;
		background: white;
		z-index: 1000;
		position: absolute;
		top: 50%; left: 50%;
		transform:translate(-50%,-50%);
		border-radius: 18rpx;
	}
	.title{
		text-align: center;
		font-weight: 700;
		font-size: $font-size-xlg;
		color: black;
		padding-top: 36rpx;
	}
	.inp{
		padding: 5px 0px;
		font-size: $font-size-base;
		margin: auto;
		margin-top: 10%;
		color: #868686;
		width: 90%;
		border: 1.2px solid #DEDEDE;
		border-radius: 5px;
		margin-bottom: 30rpx;
	}
	.btn{
		width: 100%; 
		height: 50px;
		display: flex;
	}
	.left{
		border-top: 1px solid #EAEAEA;
		border-right: 1px solid #EAEAEA;
		flex: 1;
		color: #C2C2C1;
		text-align: center;
		line-height: 50px;
		font-size: $font-size-lg;
	}
	.right{
		border-top: 1px solid #EAEAEA;
		flex: 1;
		color: #007AFF;
		text-align: center;
		line-height: 50px;
		font-size: $font-size-lg;
		font-weight: 700;
	}
	.hover{
		background: rgba(0,0,0,0.05);
	}
	.unShow1{
		/* animation: go_out .3s; */
	}
	@keyframes go_out
	  {
	     0% {opacity: 1; }
	     100%{opacity: 0; }
	}
	.unShow2{
		display: none;
	}
	.show{
		/* animation: go_in 1s; */
		display: block;
	}
	@keyframes go_in
	  {
	     0% {opacity: 0; }
	     100%{opacity: 1; }
	}
	.content{
		font-size: $font-size-lg;
		color: #000000;
		padding: 36rpx 24rpx 48rpx;
		margin: 6rpx;
	}
</style>